<template>
<div class="com-right-list pr fc">
  <div class="corner lt"></div>
  <div class="corner rt"></div>
  <div class="corner rb"></div>
  <div class="corner lb"></div>
  <div class="title fajc">{{label}}</div>
  <div class="f1 table-box">
    <table>
      <tbody>
        <tr v-for="item in chartData" :key="item.name">
          <td>{{item.name}}</td>
          <td>{{item.date}}</td>
          <td>{{item.count}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
</template>

<script>
export default {
  name: 'com-right-list',
  props: ['chartData', 'label']
}
</script>

<style lang="less">
.com-right-list {background-color: rgba(16, 38, 38, 0.7);
  .corner {position: absolute;width: 20px;height: 20px;border: 2px solid #1AFFF8;
    &.lt {border-right: 0;border-bottom: 0;left: 0;top: 0;}
    &.rt {border-left: 0;border-bottom: 0;right: 0;top: 0;}
    &.rb {border-left: 0;border-top: 0;right: 0;bottom: 0;}
    &.lb {border-right: 0;border-top: 0;left: 0;bottom: 0;}
  }
  .title {width: 100%;height: 90px;padding-bottom: 2px;font: 500 40px PingFangSC-Medium;color: #FFFFFF;background: url("../../../../assets/imgCity/header_bottom_line.png") center bottom/534px 2px no-repeat;}
  .table-box {margin: 34px 26px 0;font: 500 28px PingFangSC-Medium;color: #FFFFFF;}
  table {table-layout: fixed;width: 100%;border-spacing: 0;}
  tr {height: 64px;
    &:nth-child(odd) {background-color: #084C4C;}
    &:nth-child(even) {background-color: #132E2F;}
  }
  td {padding-left: 18px;
    &:last-child {width: 72px;}
  }
}
</style>
